<template>
    <div class="head" style="width: 100%; height: 100%;background-color: rgb(255, 241, 204);">
        <div style="display: flex; background-color: #538363;">
            <a-tabs v-model="activeKey" type="editable-card" @edit="removeTab" >
                <a-tab-pane
                    v-for="tab in tabs"
                    :key="tab.key"
                    :tab="tab.title"
                >
                </a-tab-pane> 
            </a-tabs>
        </div>
        <div style="display: flex; width: 100%; height: calc(100% - 50px);">
            <div class="head-left">
                <div style="display: flex; align-items: center; justify-content: center; margin-top: 30px;">
                    <img src="./assets/123.png" style="width: 80px; height: 80px; border-radius: 30px;" alt="">
                </div>
            </div>
            <div class="head-right">
                <UploadExcel @SendJsonExcel="handleJson"></UploadExcel>
                <TableSource :tableOptions="test" />
            </div>
        </div>
    </div>
    <div style="display: none;">
        <div style="display: flex; background-color: #538363;">
            <a-tabs v-model="activeKey" type="editable-card" @edit="removeTab">
                <a-tab-pane
                    v-for="tab in tabs"
                    :key="tab.key"
                    :tab="tab.title"
                >
                </a-tab-pane> 
            </a-tabs>
        </div>
        <a-tabs v-model:activeKey="activeKey" @change="handleTab" centered>
            <a-tab-pane key="1">
                <template #tab>
                    <span>
                        <codepen-outlined />
                        工具
                    </span>
                </template>
                <div class="scroll-box">
                    
                </div>
            </a-tab-pane>
            <a-tab-pane key="2">
                <template #tab>
                    <span>
                        <bars-outlined />
                        记录
                    </span>
                </template>
                <GetJsonParase :records="records" />
            </a-tab-pane>
        </a-tabs>
    </div>
</template>
<script>
import { CodepenOutlined, BarsOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import UploadExcel from './components/UploadExcel/index.vue';
import GetJsonParase from './components/GetJsonParase/index.vue';
import AboutInfo from './components/AboutInfo/index.vue';
import TableSource from './components/TableSource/index.vue';
import { XLSXEMIT } from './eventBus';
import { getImportHistory } from './utils/index';
import { defineComponent, reactive, ref } from 'vue';
export default defineComponent({
    components: {
        CodepenOutlined,
        BarsOutlined,
        UploadExcel,
        TableSource,
        GetJsonParase,
        AboutInfo
    },
    data() {
        return {
            activeKey: '1',
            tabs: [
                { key: '1', title: '标签 1' },
                { key: '2', title: '标签 2' }
            ],
          
        };
    },
    methods: {
        addTab() {
            const newKey = `${this.tabs.length + 1}`;
            this.tabs.push({ key: newKey, title: `标签 ${newKey}` });
            this.activeKey = newKey;
        },
        removeTab(targetKey) {
            if(this.isNumber(targetKey)){
                this.tabs = this.tabs.filter(tab => tab.key !== targetKey);
                if (this.activeKey === targetKey) {
                    this.activeKey = this.tabs.length > 0 ? this.tabs[0].key : '';
                }
            }else{
                this.addTab()
            }
        },
        isNumber(value) {
            return !isNaN(value) && value.trim() !== '' && !isNaN(Number(value));
        }
    },
    setup() {
        const test = reactive({
            columns: [1, 2],
            dataSource: [6, 6, 6]
        });
        const resultJson = ref();
        const records = ref();
        let config = reactive({
            key: ''
        });
        // 接参 ----- 不够便捷 ----- 插眼优化
        const handleJson = (val) => {
            const { isOk, jsonExcel } = val;
            if (isOk) {
                let columns = Object.keys(jsonExcel[0]).map((el) => {
                    return {
                        title: el,
                        dataIndex: el,
                        key: el
                    };
                });
                let trigerJson = jsonExcel.map((el, idx) => {
                    return Object.assign(el, { key: idx + '' });
                });
                test.dataSource = trigerJson;
                test.columns = columns;
                resultJson.value = JSON.parse(JSON.stringify(test));
            } else message.error('This is an error message');
        };
        // 搜索赋值 ----- 赋值不够优美 ----- 拆眼优化
        const handleSearch = (val) => {
            try {
                if (val === 1 && config.key.length) {
                    let a = resultJson.value.columns.filter((el) => {
                        return el.key === config.key;
                    });
                    let b = resultJson.value.dataSource.map((el, idx) => {
                        return {
                            key: idx + '',
                            [config.key]: el[config.key]
                        };
                    });
                    test.dataSource = b;
                    test.columns = a;
                } else {
                    test.dataSource = resultJson.value.dataSource;
                    test.columns = resultJson.value.columns;
                    config.key = '';
                }
            } catch (err) {
                // console.log(err);
                message.error(
                    '请先提供xlsx,填完导入后再进行事件操作'
                );
            }
        };
        // tab toggle
        const handleTab = (val) => {
            if (Number(val) === 2) {
                records.value = getImportHistory();
            }
        };
        return {
            activeKey: ref('1'),
            handleJson,
            records,
            test,
            config,
            handleSearch,
            handleTab
        };
    }
});
</script>
<style>

@import url('./style/index');
.ant-tabs-nav-scroll{
    overflow: hidden;
    white-space: nowrap;

}
.center {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
}
.row-box {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.col-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.ant-tabs-nav .ant-tabs-tab:hover {
    color: #000 !important;
}
.ant-tabs-nav .ant-tabs-tab-active {
    color: #000 !important;
}
.ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab-active{
    background-color: rgb(255, 241, 204) !important;
}
.ant-tabs-ink-bar {
    background-color: #000 !important;
}
.table-box {
    /* max-width: 750px; */
    margin: 16px auto;
}
.scroll-box {
    overflow-y: scroll;
    height: 90vh;
}
.head{
    width: 100%;
    height: 100%;
}
.ant-tabs-bar{
    margin: 0px !important;
}
.head-left{
    width: 13%;
    height: 100%;
    border-right:1px dashed rgba(139, 139, 139, 1);
}
.head-right{
    width: 87%;
    height: 100%;
    overflow: auto;
}
.custom-table .ant-table {
  background-color: #f5f5f5; /* 设置表格背景颜色 */
}
</style>
<!-- <template>
    <div id="wordView" style="width:100%; height:100%;"></div>
</template>

<script>
import mammoth from "mammoth";
export default {
  name: "detail",
  data() {
    return {
      vHtml: "",
      wordURL: "/src/style/123456.docx" //文件地址
    };
  },
  created() {
    this.readExcelFromRemoteFile(this.wordURL);
    console.log('1111111111111111111111111')
  },
  methods: {
    // 查看word文件
    readExcelFromRemoteFile(url) {
        console.log(url)
      var vm = this;
      var xhr = new XMLHttpRequest();
      xhr.open("get", url, true);
      xhr.responseType = "arraybuffer";
      xhr.onload = function() {
        if (xhr.status == 200) {
            mammoth.convertToHtml({ arrayBuffer: new Uint8Array(xhr.response) }).then(function(resultObject) {
                vm.$nextTick(() => { document.querySelector("#wordView").innerHTML = resultObject.value });
                resultObject.value.replace(/[\s|\<p>|`|\t|]/g, "")
                let fruits1 = resultObject.value.replace(/[\s|\<p>|`|\t|]/g, "").split('/');
                console.log( fruits1 )
            });
        }
      };
      xhr.send();
    }
  }
};
</script>
<style>
#app{
    width: 100%;
    height: 100%;
}
</style> -->
